<template>
  <div class="hot">
    <div class="hot-center">
      <p class="headline iconfont icon-hot">热卖、畅销</p>
      <div class="theme-container">
        <div v-for="item in 3" class="theme-wrapper">
          <div class="img-wrapper">
            <img src="">
          </div>
          <ul class="product-container">
            <li v-for="itemImg in 3" class="product-wrapper">
              <div class="img-wrapper">
                <img src="http://pic15.nipic.com/20110629/5078207_164705330000_2.jpg">
              </div>
              <p class="name" ellipsis>产品名称产品名称</p>
              <p class="price">$100</p>
            </li>
          </ul>
          <ul class="small-banner">
            <li>
              <div class="img-wrapper">
                <img src="">
              </div>
              <div class="info">
                <p ellipsis>产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称</p>
                <p ellipsis>产品描述产品描述产品描述产品描述产品描述产品描述产品描述</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hot',
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.hot {
  margin-bottom: 1.6rem;
  .hot-center {
    width: 24rem;
    margin: 0 auto;
    .headline {
      margin-bottom: .44rem;
      font-size: .48rem;
      font-weight: bolder;
      &:before {
        margin-right: .2rem;
        color: #FB5005;
      }
    }
    .theme-container {
      display: flex;
      justify-content: space-between;
      .theme-wrapper {
        width: 7.72rem;
        display: flex;
        flex-direction: column;
        .img-wrapper {
          width: 100%;
          height: 4.2rem;
          font-size: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .product-container {
          box-sizing: border-box;
          padding: .5rem;
          display: flex;
          justify-content: space-between;
          .product-wrapper {
            width: 2rem;
            height: 3rem;
            background: #fff;
            box-sizing: border-box;
            padding: .1rem;
            .img-wrapper {
              width: 100%;
              height: 1.8rem;
            }
            p {
              text-align: center;
              font-size: .24rem;
              margin-top: .1rem;
              line-height: .4rem;
              height: .4rem;
            }
            .price {
              font-size: .28rem;
              font-weight: bolder;
              color: red;
            }

          }
        }
        .small-banner {
          height: 2rem;
          background: #fff;
          box-sizing: border-box;
          padding: .4rem;
          li {
            width: 100%;
            display: flex;
            .img-wrapper {
              width: 1.2rem;
              height: 1.2rem;
              margin-right: .2rem;
              flex: none;
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
            .info {
              width: calc(100% - 1.4rem);
              display: flex;
              flex-direction: column;
              justify-content: center;
              p {
                font-size: .28rem;
                height: .4rem;
                line-height: .4rem;
              }
              p:first-child {
                font-weight: bolder;
                margin-bottom: .16rem;
              }
            }
          }

        }
      }
    }
  }

}

</style>